Skip to content

docs(storybook-angular): document code coverage and the monorepo dependency pitfall#2350

Merged
brandonroberts merged 1 commit into
betafrom
fix/vitest-coverage-synthetic-mappings
May 29, 2026
Merged

docs(storybook-angular): document code coverage and the monorepo dependency pitfall#2350
brandonroberts merged 1 commit into
betafrom
fix/vitest-coverage-synthetic-mappings

Conversation

@brandonroberts

@brandonroberts brandonroberts commented May 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

PR Checklist

Closes #2349

Documents code coverage for Storybook + Vitest, including the monorepo pitfall where a workspace dependency imported through its package/barrel entry is reported with 0% coverage in browser V8 mode.

Affected scope

  • Primary scope: storybook-angular (docs)
  • Secondary scopes: none

Recommended merge strategy for maintainer [optional]

  • Squash merge
  • Rebase merge
  • Other

What is the new behavior?

Adds a Code Coverage section to the Storybook integration guide:

  • How to enable the V8 coverage provider for stories.
  • A Monorepo configuration note: when a story imports a shared library through its package/barrel entry, Vite pre-bundles it and serves it from node_modules/.vite/deps. Browser-mode V8 coverage ignores any module served from node_modules, so the dependency is reported with 0 hits at its source path even though it executed — and merging that with the unit-test report double-counts the file and lowers the overall percentage. Documents the optimizeDeps.exclude workaround (via viteFinal in .storybook/main.ts) that serves such dependencies from source so they are instrumented.

Documentation only — no runtime/code changes.

Note: this PR originally also carried a sourcemap fix to strip Angular's AOT synthetic emit from coverage. It was dropped: that "phantom functions/branches" symptom only occurs under AOT test compilation (jit: false), while both Vitest unit tests and @analogjs/storybook-angular default to JIT, where the symptom does not occur. The remaining, real issue is the monorepo dependency configuration documented here.

Test plan

  • nx format:check
  • pnpm build
  • pnpm test
  • Manual verification

Verified the documented optimizeDeps.exclude workaround end-to-end in apps/analog-app against the real @analogjs/storybook-angular + @storybook/addon-vitest V8 browser pipeline: a transitively-imported workspace dependency went from 0% to correct coverage once excluded from pre-bundling.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

Docs only.

@netlify

netlify Bot commented May 29, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for analog-blog ready!

Name Link
🔨 Latest commit 5405634
🔍 Latest deploy log https://app.netlify.com/projects/analog-blog/deploys/6a19fa626fd82800083c2d70
😎 Deploy Preview https://deploy-preview-2350--analog-blog.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 29, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for analog-docs ready!

Name Link
🔨 Latest commit 5405634
🔍 Latest deploy log https://app.netlify.com/projects/analog-docs/deploys/6a19fa62958b880008700832
😎 Deploy Preview https://deploy-preview-2350--analog-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented May 29, 2026 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for analog-app ready!

Name Link
🔨 Latest commit 5405634
🔍 Latest deploy log https://app.netlify.com/projects/analog-app/deploys/6a19fa626fd82800083c2d6e
😎 Deploy Preview https://deploy-preview-2350--analog-app.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai

coderabbitai Bot commented May 29, 2026 •
edited
Loading

Copy link
Copy Markdown

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds a new exported utility stripAngularSyntheticMappings that parses a sourcemap JSON, detects Angular AOT-generated synthetic output lines (ɵ* statics and metadata/debug IIFEs) via an OXC AST, clears decoded mappings for those generated lines, re-encodes the mappings, and returns the updated map JSON. Integrates this function into the Vite plugin so transforms in test mode rewrite TypeScript-generated maps. Adds dependency @jridgewell/sourcemap-codec, tests covering synthetic and edge cases, a docs "Code Coverage" section, and an Nx target for coverage-mapping checks.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed The PR directly addresses #2349 by implementing a custom sourcemap mapping stripper (stripAngularSyntheticMappings) that removes mappings for Angular synthetic emit, eliminating phantom functions/branches/statements in coverage reports.
Out of Scope Changes check ✅ Passed All changes are scoped to the objective: new synthetic-coverage-mappings utility and integration into vite-plugin-angular, dependency updates, tests, and documentation on coverage configuration. No unrelated modifications detected.
Title check ✅ Passed The title follows Conventional Commit style with the supported scope 'storybook-angular' and clearly describes the documentation change about code coverage and monorepo dependency configuration.
Description check ✅ Passed The description is directly related to the changeset, clearly explaining the new documentation section added for code coverage in Storybook integration and the monorepo dependency pitfall workaround.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added scope:repo Repository metadata and tooling scope:vite-plugin-angular Changes in @analogjs/vite-plugin-angular scope:vitest-angular Changes in @analogjs/vitest-angular labels May 29, 2026
@brandonroberts brandonroberts force-pushed the fix/vitest-coverage-synthetic-mappings branch from 62c66c8 to 36736f0 Compare May 29, 2026 19:35
@github-actions github-actions Bot added the scope:docs Documentation changes label May 29, 2026
@brandonroberts brandonroberts force-pushed the fix/vitest-coverage-synthetic-mappings branch 2 times, most recently from 4fca392 to 4f98868 Compare May 29, 2026 19:38
@brandonroberts brandonroberts mentioned this pull request May 29, 2026
Closed
2 tasks
@brandonroberts brandonroberts force-pushed the fix/vitest-coverage-synthetic-mappings branch from 4f98868 to f2fa521 Compare May 29, 2026 19:41
@brandonroberts
docs(storybook-angular): document code coverage and the monorepo depe…
5405634 
…ndency pitfall

Adds a Code Coverage section to the Storybook integration guide: how to enable
the V8 provider for stories, and a Monorepo configuration note explaining that
a workspace dependency imported via its package/barrel entry is pre-bundled and
served from node_modules, where browser-mode V8 coverage ignores it. The
dependency is then reported with 0 hits at its source path and double-counts
when its report is merged with the unit-test report. Documents the
optimizeDeps.exclude (viteFinal) workaround that serves such dependencies from
source so they are instrumented.

Closes #2349
@brandonroberts brandonroberts force-pushed the fix/vitest-coverage-synthetic-mappings branch from f2fa521 to 5405634 Compare May 29, 2026 20:43
@github-actions github-actions Bot removed scope:vite-plugin-angular Changes in @analogjs/vite-plugin-angular scope:vitest-angular Changes in @analogjs/vitest-angular scope:repo Repository metadata and tooling labels May 29, 2026
@brandonroberts brandonroberts changed the title fix(vite-plugin-angular): strip Angular synthetic emit from test sourcemaps docs(storybook-angular): document code coverage and the monorepo dependency pitfall May 29, 2026
@brandonroberts brandonroberts merged commit ef772c1 into beta May 29, 2026
24 checks passed
@brandonroberts brandonroberts deleted the fix/vitest-coverage-synthetic-mappings branch May 29, 2026 20:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

scope:docs Documentation changes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Coverage emits 0% LCOV for transitive TS deps, causing duplicate/incorrect merged coverage

1 participant

@brandonroberts